/*
 * QuPath's default dark mode.
 * Should be applied after main.css.
 *
 * See https://tomsondev.bestsolution.at/2014/03/13/eclipse-on-javafx-get-dark-the-power-of-javafx-css/
 * for some useful info about JavaFX styling via CSS.
 * 
 * See also https://openjfx.io/javadoc/11/javafx.graphics/javafx/scene/doc-files/cssref.html
 */
.root {
    -fx-base: rgb(45, 48, 50);
    
    -fx-background: derive(-fx-base, -10%);
    
    -fx-control-inner-background: derive(-fx-base, 10%);
    -fx-control-inner-background-alt: derive(-fx-control-inner-background,1%);
    
    -fx-light-text-color: rgb(200, 200, 200);
    
    -fx-accent: rgb(195, 223, 255, 0.5);

    -qp-script-error-color: rgb(255, 60, 60);
    -qp-script-string-color: rgb(255, 240, 60);
    
     -fx-box-border: ladder(
        -fx-color,
        black 20%,
        derive(-fx-color,15%) 30%
    );
    
    -fx-mark-color: ladder(
        -fx-color,
        rgb(200, 200, 200) 30%,
        derive(-fx-color,-63%) 31%
    );
    
    -fx-mark-highlight-color: ladder(
        -fx-color,
        derive(-fx-color,80%) 60%,
        rgb(200, 200, 200) 70%
    );
    
/*     -fx-text-box-border: ladder(
        -fx-background,
        black 10%,
        derive(-fx-background, 15%) 30%
    ); */
}

.code-area * {
  -fx-highlight-fill: derive(-fx-base, 40%);
}

/* Input prompt text colour */
.text-input {  
    -fx-prompt-text-fill: derive(-fx-control-inner-background, 70%) !important;
}

/* Expandable dialog text */
.dialog-pane > .button-bar > .container > .details-button {
    -fx-text-fill: -fx-text-background-color;
}

/* Expandable dialog icon */
.dialog-pane > .button-bar > .container > * > .image-view {
    -fx-blend-mode: soft-light;
}

/* .slider {
	-fx-control-inner-background: derive(-fx-base, 25%);
} */

.check-box > .box,
.radio-button > .radio {
	-fx-outer-border: derive(-fx-color,40%);
}

.slider {
	-fx-control-inner-background: derive(-fx-base, 25%);
}

.slider .thumb {
    -fx-background-color:
        linear-gradient(to bottom, derive(-fx-text-box-border, 60%), derive(-fx-text-box-border, 30%)),
        -fx-inner-border,
        -fx-body-color;
}

.table-view,
.tree-table-view {
    -fx-table-header-border-color: -fx-box-border;
    -fx-table-cell-border-color: derive(-fx-color,20%);
}

.axis {
    AXIS_COLOR: derive(-fx-background,40%);
}

.list-cell:filled:selected:focused .button .text {
    -fx-fill: -fx-text-base-color;
}

